<%--
  Created by IntelliJ IDEA.
  User: liuxi
  Date: 2018/5/26
  Time: 18:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/statics/sweetalert.css"/>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/sweetalert.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/table/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/date/Moment.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.js"></script>
    <style type="text/css">
        textarea {
            resize: none;

        }
    </style>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group">
                标题：<input id="notTitle" name="title" type="text" class="form-control" placeholder="搜索内容">
            </div>
            日期时间段:
            <div class="input-group input-daterange">
                <input id="startTime" type="text" class="form-control">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                <div class="input-group-addon">到：</div>
                <input id="endTime" type="text" class="form-control">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <button onclick="search()" type="button" class="btn btn-default">查询</button>
        </form>
    </div>
</div>
<%--修改模态框--%>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">公告修改</h4>
                </div>
                <div class="modal-body">
                    <p>公告编号：<input type="text" name="notId" readonly="readonly"></p>
                </div>
                <div class="modal-body">
                    <p>公告标题：<input type="text" name="notTitle"></p>
                </div>
                <div class="modal-body">
                    <p>公告内容：<input type="text" name="notText"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary up" >修改</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<table id="table"></table>
<div>
    <p id="title" style="width: 480px;margin: 0 auto"></p>
    <textarea id="context" readonly="readonly" style="display: none;margin:  0 auto;" cols="100" rows="18">

    </textarea>
</div>
</body>
<script type="text/javascript">



    window.operateEvents = {
        "click .del": function (e, value, row, index) {
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",

                closeOnConfirm: true
            }, function () {
                $.ajax({
                    "url": '${pageContext.request.contextPath}/Notice/del',
                    "type": "post",
                    "data": {"notId": row.notId},
                    "dataType": "json",
                    "success": function (data) {
                        if (data >= 1) {
                            $("#table").bootstrapTable("refresh");
                        }
                    }
                })
            });
        },"click .update":function(e, value, row, index){
            $('#myModal').modal('show');
            $("input[name=notId]").val(row.notId);
            $("input[name=notTitle]").val(row.notTitle);
            $("input[name=notText]").val(row.notText) ;
        }
    };
    $(".up").bind("click",function () {
        var notId = $("input[name=notId]").val();
        var notTitle = $("input[name=notTitle]").val();
        var notText = $("input[name=notText]").val() ;
        $.ajax({
            "url": '${pageContext.request.contextPath}/Notice/update',
            "type": "post",
            "data": {"notId": notId,"notTitle":notTitle,"notText":notText},
            "dataType": "json",
            "success": function (data) {
                $('#myModal').modal('hide');
                if (data >= 1) {
                    $("#table").bootstrapTable("refresh");
                }
            }
        })
    });

    function queryParams(params) {
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize: params.pageSize,  //页面大小
            pageNumber: params.pageNumber, //页码
            notTitle: $("#notTitle").val(),
            startTime: $("#startTime").val(),
            endTime: $("#endTime").val()
        };
        return temp;
    }

    function search() {
        var opts = $("#table").bootstrapTable('getOptions');
        var notTitle = $("#notTitle").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        $.ajax({
            "url": "${pageContext.request.contextPath}/Notice/query",
            "type": "post",
            "data": {
                "notTitle": notTitle,
                "startTime": startTime,
                'endTime': endTime,
                "pageNumber": opts.pageNumber,
                "pageSize": opts.pageSize
            },
            "dataType": "json",
            "success": function (data) {
                $("#table").bootstrapTable('load', data);
            }
        })
    }

    $(function () {
        // 时间插件
        $('#startTime').datetimepicker({
            //viewMode: 'day',
            format: 'YYYY-MM-DD'
        });
        $('#endTime').datetimepicker({
            format: 'YYYY-MM-DD',
            useCurrent: false //Important! See issue #1075
        });
        $("#startTime").on("dp.change", function (e) {
            $('#endTime').data("DateTimePicker").minDate(e.date);
        });
        $("#endTime").on("dp.change", function (e) {
            $('#startTime').data("DateTimePicker").maxDate(e.date);
        });

        //bootstrapTable
        $("#table").bootstrapTable({
            url: '${pageContext.request.contextPath}/Notice/query',
            columns: [{
                field: 'notId',
                title: '公告编号'
            }, {
                field: 'notTitle',
                title: '公告标题'
            }, {
                field: 'notDate',
                title: '发布时间'
            }, {
                title: '操作',
                events: operateEvents,
                formatter: caozuo
            }],
            onDblClickCell: function (field, $element, row) {
                var notid = row.notId;
                $.ajax({
                    "url": '${pageContext.request.contextPath}/Notice/getNoticeById',
                    "data": {"notid": notid},
                    "type": "post",
                    "success": function (data) {
                        $("#context").css("display", "block");
                        $("#context,#title").empty();
                        $("#title").html("标题:" + data.notTitle);
                        $("#context").html(data.notText);
                    }
                })
            },
            method: 'post',
            contentType: "application/x-www-form-urlencoded",
            height: 300,
            pageList: [5, 10, 15],
            pageSize: 5,
            sortable: true,
            sortOrder: "asc",
            pageNumber: 1,
            pagination: true,
            queryParamsType: '',
            queryParams: queryParams,
            sidePagination: 'server'
        });
        function caozuo(value, row, index) {
            return [
                "<a class='del' href=javascript:del(" + row.notId + ")>删除</a>&nbsp;&nbsp;<a class='update' href=javascript:update(" + row.notId + ")>修改</a>"
            ].join("");
        }
    })
</script>
</html>
